<template>
    <div class="img_box">
        <img class="mask_img" :src="props.maskSrc || '/imgs/home/del.webp'" v-show="isShow">
        <nut-image :src="settings.backend_upload + props.item.picture_h5" show-loading show-error @error="onError"
            @load="onSuccess">
            <template #loading>
                <Loading width="16" height="16"></Loading>
            </template>
            <template #error>
                <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
            </template>
        </nut-image>

    </div>

</template>

<script setup lang='ts' name="Img">
import { ref } from "vue";
import { Loading, CircleClose } from '@nutui/icons-vue'
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
const { settings } = storeToRefs(Page(pinia));
console.log(settings.value.backend_upload);

const isShow = ref(false)
const props: any = defineProps({
    item: {
        type: Object
    }
})
// console.log(props.item);
// debugger
const onError = () => {
    isShow.value = false
}
const onSuccess = () => {
    isShow.value = true
}

</script>
<style lang='scss' scoped>
.img_box {
    position: relative;
    width: 100%;

    .mask_img {
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }
}
</style>